Yolo | Responsive Multi-Purpose HTML Template

Version: 1.1.0
Last Updated: 06/01/2018
Author: Themesflat

Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

HTML5 & CSS3
Responsive Template
Free icons used
Pixel Perfect
Clean & Unique Design
Easy to customize
Retina Ready
Unlimited Colors
Boxed or Wide layout
Ajax Contact Form
Ajax Appoinment Form
3 Portfolio page
Portfolio Masonry
Portfolio grid alt
Four types of header
One page
2 Blog Page
Parallax Effect
& much more...

HTML Structure

Yolo | Responsive Multi-Purpose HTML Template is a clean and trendy HTML Template designed with Grid-Based Approach. Can be used for a lot of type of websites, like modern corporative pages, Studio, Business, Freelancer, Designer, Portfolio, Photography, Law Firm, Interior Design, Architecture, Video, Magazine, Blogs, Shops, and trendy personal pages. Yolo is a multipurpose creative template that will jump start your business. Impress your users with unique and complementing aesthetics, pixel-perfect layouts, pleasing color schemes and much more. You can customize it very easy to fit your business needs. If you like my HTML, please rate it 5 stars. It’s very useful for me.

Below is Specialist basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Yolo | Responsive Multi-Purpose HTML Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	

	<!-- Slider -->

    <!-- Section -->
    <section class="flat-row"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-chevron-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="javascript/jquery.min.js"></script>
   <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
   <script type="text/javascript" src="javascript/jquery.easing.js"></script>
   <script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
   <script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
   <script type="text/javascript" src="javascript/owl.carousel.js"></script>
   <script type="text/javascript" src="javascript/jquery-waypoints.js"></script>   
   <script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>   
   <script type="text/javascript" src="javascript/jquery-countTo.js"></script>   
   <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
   <script type="text/javascript" src="javascript/jquery.magnific-popup.min.js"></script>
   <script type="text/javascript" src="javascript/parallax.js"></script>
   <script type="text/javascript" src="javascript/smoothscroll.js"></script>
   <script type="text/javascript" src="javascript/jquery-validate.js"></script>
   <script type="text/javascript" src="javascript/jquery.countdown.js"></script>
   <script type="text/javascript" src="javascript/switcher.js"></script>
   <script type="text/javascript" src="javascript/main.js"></script>
</body>

</html>

CSS System

The Specialist CSS System contains 3 parts:

Template style
Shortcodes style
Responsive style
Javascript - Fonts - Animation - Bootstrap style

Style.css ( Template style )


/**
  * Reset
  * Repeatable Patterns
  * Boxed Style1
  * Header Top
  * Header
  * Mobile navigation
  * Main Blog
  * Comment
  * SideBar
  * Footer
  * Footer Style2
  * Footer Style3
  * Footer Style4
  * Footer Style5
  * Footer Style6
  * Footer Style7
  * Footer Bottom
  * Flat Partner
  * Preload
  * Switcher
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/**
  * Flat About
  * Flat Title
  * Flat About Style4
  * Flat Team
  * Flat Team Style1
  * Flat Team Style2
  * Flat Team Style3
  * Flat Team Style4
  * Flat Team Style5
  * Flat Team Style6
  * Flat Team Style7
  * Minimals
  * Flat Testimonial
  * Flat Testimonial Style1
  * Flat Testimonial Style2
  * Flat Testimonial Style3
  * Flat Testimonial Style4
  * Flat Testimonial Style5
  * Flat Testimonial Style6
  * Flat Testimonial Style7
  * Flat Testimonial Style8
  * Flat Testimonial Style9
  * Flat Testimonial Style10
  * Flat History
  * Flat About Me
  * Flat Skill Me
  * Flat Page Title
  * Flat Price
  * Flat Price Style2
  * Flat Iconbox
  * Flat Iconbox Style1
  * Flat Iconbox Style2
  * Flat Iconbox Style3
  * Flat Iconbox Style4
  * Flat Iconbox Style5
  * Flat Iconbox Style6
  * Flat Iconbox Style7
  * Flat Iconbox Style8
  * Flat Iconbox Style9
  * Flat Iconbox Style10
  * Flat Iconbox Style11
  * Flat Iconbox Style12
  * Flat Progress
  * Flat Progress Style1
  * Flat Progress Style2
  * Flat Progress Style3
  * Flat Progress Style4
  * Flat Contact Form
  * Flat Contact Form Style1
  * Flat Contact Form Style2
  * Flat Contact Form Style3
  * Flat Contact Form Style4
  * Flat Contact Form Style5
  * Flat About Style1
  * Flat Tabs
  * Flat Accordion
  * Flat Accordion Style1
  * Flat Accordion Style2
  * Flat Accordion Style3
  * Flat Accordion Style4
  * Flat Countdown
  * Flat Counter
  * Flat Actions Style2
  * Flat Actions Style3
  * Flat Clients
  * Flat Columns
  * Flat Heading
  * Flat Highlights
  * Flat Blockquote
  * Flat List Styles
  * Flat Socials
  * Flat Dividers
  * Flat Imagebox
  * Flat Jobs
  * Flat Services
  * Flat Contact Classic
  * Flat Error
  * Flat Comming Soon
  * Flat Button
  * Main Shop
  * Flat Actions Style1
  * Footer Style1
  * Flat Sign In
  * Sidebar Shop
  * Flat Product Detail
  * Flat Content
  * Flat Product Related
  * Flat Portfolio
  * Flat Related Case
  * Flat Our Work Style1
  * Flat Portfolio Single
  * Flat Portfolio Single Style1
  * Flat Portfolio Slide
  * Flat Call Back
  * Flat Call Back Style1
  * Revolution
  * Flat Call Action
  * Flat Call Action Style3
  * Flat About Us
  * Flat Our Team
  * Flat Contact Us
  * Flat Contact Us Style1
  * Flat Video
  * Flat Popular Video
  * Main Shop Minimals
  * Main Shop Minimals Style1
  * Flat Banner
  * Flat Choose
  * Flat Work
  * Flat About Me Style1
  * Flat Skill Me Style1
  * Flat Our Work
  * Flat Our Work Style2
  * Flat About Me Style2
  * Flat Event
  * Flat Subscibe Email
  * Register Form
  * Flat Our Mission
  * Flat Course
  * Go Top
  * Parallax
  * Hover Button Style
*/

Javascript - Fonts - Animation - Bootstrap style

/**  
  * themify-icons.css
  * font-awesome.css
  * elegant.css

  * flexslider.css
  * owl.carousel.css
  * shortcodes.css

  * animate.css
  * shortcodes.css

  * bootstrap.css 
  * revolution-slider.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( javascript/main.js )


/**
  * responsiveMenu
  * searchButton
  * menuCanvas
  * Filterbox
  * slidePartner
  * slideTestimonial
  * slideTestimonial_S2
  * slideTestimonial_S3
  * slideTestimonial_S4
  * slideCarousel
  * slideClients
  * slideRelated
  * slideSingleSimple
  * slidePhotography
  * slidePhotography_s2
  * slideVideo
  * slideVideo_S2
  * slideProject
  * slideImagebox
  * slideImagebox_s2
  * slideOurwork
  * slideOwl_carousel
  * slideImagebox_s3
  * slideImagebox_s4
  * tabAbout
  * counterAbout
  * progressBar
  * countdown_1
  * CountDown
  * CountDown_S2
  * videoPopup
  * accordionToggle
  * portfolioIsotope
  * googleMap
  * googleMap_S2
  * parallax
  * heights
  * flexProduct
  * tabProduct
  * tabDetailProduct
  * detectViewport
  * gridPhotography
  * shopMetroIpsotope
  * ajaxSubscribe.eventLoad
  * ajaxContactForm
  * swClick
  * goTop
  * scroll
  * removePreloader
*/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/**
  * Flat About
  * Flat Title
  * Flat About Style4
  * Flat Team
  * Flat Team Style1
  * Flat Team Style2
  * Flat Team Style3
  * Flat Team Style4
  * Flat Team Style5
  * Flat Team Style6
  * Flat Team Style7
  * Minimals
  * Flat Testimonial
  * Flat Testimonial Style1
  * Flat Testimonial Style2
  * Flat Testimonial Style3
  * Flat Testimonial Style4
  * Flat Testimonial Style5
  * Flat Testimonial Style6
  * Flat Testimonial Style7
  * Flat Testimonial Style8
  * Flat Testimonial Style9
  * Flat Testimonial Style10
  * Flat History
  * Flat About Me
  * Flat Skill Me
  * Flat Page Title
  * Flat Price
  * Flat Price Style2
  * Flat Iconbox
  * Flat Iconbox Style1
  * Flat Iconbox Style2
  * Flat Iconbox Style3
  * Flat Iconbox Style4
  * Flat Iconbox Style5
  * Flat Iconbox Style6
  * Flat Iconbox Style7
  * Flat Iconbox Style8
  * Flat Iconbox Style9
  * Flat Iconbox Style10
  * Flat Iconbox Style11
  * Flat Iconbox Style12
  * Flat Progress
  * Flat Progress Style1
  * Flat Progress Style2
  * Flat Progress Style3
  * Flat Progress Style4
  * Flat Contact Form
  * Flat Contact Form Style1
  * Flat Contact Form Style2
  * Flat Contact Form Style3
  * Flat Contact Form Style4
  * Flat Contact Form Style5
  * Flat About Style1
  * Flat Tabs
  * Flat Accordion
  * Flat Accordion Style1
  * Flat Accordion Style2
  * Flat Accordion Style3
  * Flat Accordion Style4
  * Flat Countdown
  * Flat Counter
  * Flat Actions Style2
  * Flat Actions Style3
  * Flat Clients
  * Flat Columns
  * Flat Heading
  * Flat Highlights
  * Flat Blockquote
  * Flat List Styles
  * Flat Socials
  * Flat Dividers
  * Flat Imagebox
  * Flat Jobs
  * Flat Services
  * Flat Contact Classic
  * Flat Error
  * Flat Comming Soon
  * Flat Button
  * Main Shop
  * Flat Actions Style1
  * Footer Style1
  * Flat Sign In
  * Sidebar Shop
  * Flat Product Detail
  * Flat Content
  * Flat Product Related
  * Flat Portfolio
  * Flat Related Case
  * Flat Our Work Style1
  * Flat Portfolio Single
  * Flat Portfolio Single Style1
  * Flat Portfolio Slide
  * Flat Call Back
  * Flat Call Back Style1
  * Revolution
  * Flat Call Action
  * Flat Call Action Style3
  * Flat About Us
  * Flat Our Team
  * Flat Contact Us
  * Flat Contact Us Style1
  * Flat Video
  * Flat Popular Video
  * Main Shop Minimals
  * Main Shop Minimals Style1
  * Flat Banner
  * Flat Choose
  * Flat Work
  * Flat About Me Style1
  * Flat Skill Me Style1
  * Flat Our Work
  * Flat Our Work Style2
  * Flat About Me Style2
  * Flat Event
  * Flat Subscibe Email
  * Register Form
  * Flat Our Mission
  * Flat Course
  * Go Top
  * Parallax
  * Hover Button Style
*/

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Example Edit Template

1. Example of how to edit the logo template


You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Specialist:-> images -> logo.png

2. Example of how to edit the "iconbox" template

Two column: add class "item-two-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-two-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Three column: add class "item-three-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-three-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Four column: add class "item-four-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-four-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Credits

Photos
- All images are just used for preview purpose only and NOT included in the final purchase files.
Fonts & Icons
- Font-Awesome
- Simple line icons
- Source Sans Pro is available for free on Google fonts.
- Poppins is available for free on Google fonts.
Javascript
- jQuery (http://jquery.com/)
- Bootstrap (http://getbootstrap.com)
- Easing (http://gsgd.co.uk/sandbox/jquery/easing/)
- WayPoints (http://imakewebthings.com/jquery-waypoints/)
- Flexslider (http://flexslider.woothemes.com)
- owl.carousel (http://owlgraphic.com/owlcarousel/)
- Parallax (http://www.ianlunn.co.uk/plugins/jquery-parallax/)
- Cookie (https://github.com/carhartl/jquery-cookie)
- Validate (https://github.com/jzaefferer/jquery-validation)
- Isotope (http://isotope.metafizzy.co/)
- Imagesloaded (http://imagesloaded.desandro.com/)
- Countdown (http://hilios.github.io/jQuery.countdown/)
- Switcher (https://github.com/djanix/jquery.switcher/)
- Smoothscroll (https://gist.github.com/galambalazs/6477177)
- Magnific Popup (https://github.com/dimsemenov/Magnific-Popup)
- Gmap3 (http://gmap3.net)